<template>
  <div class="full-screen">
    <div class="shoping-cart-header">
      <h1>
        <p>购物车</p>
        <p>燕湾区</p>
        <p>编辑</p>
      </h1>
    </div>
    <div class="shoping-cart-list">
      <div class="shops" v-for="(item, index) in shopsList" :key="index">
        <div class="shop">
          <div class="shop-left">
            <input
              type="checkbox"
              class="circular-checkbox"
              :checked="item.selectAll"
              @click="selectToggle(item)"
            />
          </div>
          <div class="shop-center">
            食品专营店
          </div>
          <div class="shop-right">已免运费</div>
        </div>
        <div
          class="goods-item"
          v-for="(goodsItem, goodsIndex) in item.goods"
          :key="goodsIndex"
        >
          <div class="goods-item-left">
            <input
              type="checkbox"
              class="circular-checkbox"
              :checked="goodsItem.isSelect"
              @click="selectThis(goodsItem)"
            />
          </div>
          <div class="goods-item-center">
            <img :src="goodsItem.imgUrl" />
          </div>
          <div class="goods-item-right">
            <p>
              {{ goodsItem.title }}
            </p>
            <p>
              <span
                v-for="(param, paramIndex) in goodsItem.parameter"
                :key="paramIndex"
              >
                {{ param }}
              </span>
              <!-- <span>3L</span> -->
            </p>
            <div>
              <p>￥{{ goodsItem.price }}</p>
              <div class="goods-reduce-add">
                <i @click="reduce(goodsItem)">-</i>
                <span>{{ goodsItem.num }}</span>
                <i @click="add(goodsItem)">+</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shoping-cart-calculation">
      <div>
        <input
          type="checkbox"
          class="circular-checkbox"
          :checked="selectAll"
          @click="selectAllGoods"
        />
        全部
      </div>
      <div>
        合计
        <span>￥：{{ sum }}</span>
      </div>
      <div>
        <a href="javascript:void(0)"> 去结算({{ num }}) </a>
      </div>
    </div>
    <div class="footer">
      <footer-bottom :activeIndex="3" />
    </div>
  </div>
</template>
<script>
import footerBottom from '../../base/footerBottom'
export default {
  components: {
    footerBottom,
  },
  data() {
    return {
      sum: 0,
      selectAll: false,
      num: 0,
      shopsList: [
        {
          shopId: '1',
          selectAll: false,
          goods: [
            {
              goodsId: '1-1',
              shopId: '1',
              title:
                ' 滴露(Dettol) 衣物除菌液 舒薰衣草3L 高效杀菌除螨 孕妇儿童内衣内裤一起洗 ',
              parameter: ['安卓', '4寸'],
              num: 1,
              price: 19.9,
              imgUrl: require('../../../images/cart/cart_1.jpg'),
              isSelect: false,
            },
            {
              goodsId: '1-2',
              shopId: '1',
              title:
                ' 滴露(Dettol) 衣物除菌液 舒薰衣草3L 高效杀菌除螨 孕妇儿童内衣内裤一起洗 ',
              parameter: ['苹果', '5寸'],
              num: 1,
              price: 20.0,
              imgUrl: require('../../../images/cart/cart_2.jpg'),
              isSelect: false,
            },
          ],
        },
        {
          shopId: '2',
          selectAll: false,
          goods: [
            {
              goodsId: '2-1',
              shopId: '2',
              title:
                ' 滴露(Dettol) 衣物除菌液 舒薰衣草3L 高效杀菌除螨 孕妇儿童内衣内裤一起洗 ',
              parameter: ['安卓', '4寸'],
              num: 1,
              price: 39.9,
              imgUrl: require('../../../images/cart/cart_3.jpg'),
              isSelect: false,
            },
          ],
        },
      ],
    }
  },
  methods: {
    add(item) {
      if (item.num >= 99) {
        return
      }
      item.num += 1
      this.totalPrice()
      // if (item.isSelect) {
      //   // this.paymentQuantity(item)
      // }
      this.paymentQuantity()
    },
    reduce(item) {
      if (item.num <= 1) {
        return
      }
      item.num -= 1
      this.totalPrice()
      this.paymentQuantity()
    },
    selectToggle(item) {
      item.selectAll = !item.selectAll
      item.goods.forEach(function(obj) {
        if (item.selectAll) {
          obj.isSelect = true
        } else {
          obj.isSelect = false
        }
      })
      this.totalPrice()
      this.paymentQuantity()
    },
    selectThis(item) {
      item.isSelect = !item.isSelect
      this.surveyShopsList(item.shopId)
      this.totalPrice()
      this.paymentQuantity(item)
    },
    surveyShopsList(id) {
      for (var i = 0; i < this.shopsList.length; i++) {
        if (this.shopsList[i].shopId == id) {
          for (var j = 0; j < this.shopsList[i].goods.length; j++) {
            if (!this.shopsList[i].goods[j].isSelect) {
              this.shopsList[i].selectAll = false
              return
            } else {
              this.shopsList[i].selectAll = true
            }
          }
        }
      }
    },
    totalPrice() {
      // console.log('11111')
      let sum = 0
      let newArray = []
      let newArr = []
      for (let i = 0; i < this.shopsList.length; i++) {
        newArray = this.shopsList[i].goods.filter(function(goodsItem) {
          return goodsItem.isSelect === true
        })
        newArr = newArr.concat(newArray)
      }
      // console.log(newArr)
      for (let i = 0; i < newArr.length; i++) {
        sum += newArr[i].price * newArr[i].num
      }
      // return 30
      // console.log(sum.toFixed(2))
      this.sum = sum.toFixed(2)
    },
    selectAllGoods() {
      this.selectAll = !this.selectAll
      if (!this.selectAll) {
        this.shopsList.forEach(function(shop) {
          shop.selectAll = false
          shop.goods.forEach(function(goods) {
            goods.isSelect = false
          })
        })
      } else {
        this.shopsList.forEach(function(shop) {
          shop.selectAll = true
          shop.goods.forEach(function(goods) {
            goods.isSelect = true
          })
        })
      }
      this.totalPrice()
      // console.log(this.selectAll)
      this.paymentQuantity()
    },
    // 计算选择付款商品的数量
    paymentQuantity() {
      this.num = 0
      var _this = this
      this.shopsList.forEach(function(shop) {
        shop.goods.forEach(function(good) {
          if (good.isSelect) {
            _this.num += good.num
          }
        })
      })
    },
  },
  computed: {},
  watch: {
    // shopsList: {
    //   handler(newList, oldList) {
    //     console.log('111')
    //   },
    //   immediate: true,
    // },
  },
}
</script>
<style lang="less" scoped>
@import '../../../style/mixin.less';
.full-screen {
  .fullScreen(@backcolor);
  overflow: auto;
  font-size: 0.7rem;
  color: #333;
}
.shoping-cart-header {
  height: 1.8rem;
  background-color: #fff;
  > h1 {
    font-size: 0.7rem;
    font-weight: normal;
    padding-left: 5rem;
    display: flex;
    line-height: 1.8rem;
    > p {
      margin-left: 0.2rem;
      &:nth-child(1) {
      }
      &:nth-child(2) {
        font-size: 0.5rem;
        font-weight: 600;
      }
      &:nth-child(3) {
        color: #3377ff;
        margin-left: 5rem;
        font-size: 0.6rem;
      }
    }
  }
}
.shoping-cart-list {
  width: 15rem;
  margin: 0 auto;
  margin-top: 0.5rem;
  padding-bottom: 3rem;
  .shops {
    background-color: #fff;
    border-radius: 0.2rem;
    overflow: hidden;
    padding-left: 0.3rem;
    padding-bottom: 1rem;
    margin-top: 0.75rem;
    .shop {
      display: flex;
      margin-top: 0.5rem;
      height: 1.9rem;
      line-height: 1.9rem;
      .shop-left {
        // 修改checkbox的默认样式start
        padding-top: 0.5rem;
        box-sizing: border-box;
        overflow: hidden;
        // .circular-checkbox {
        //   .circular-checkbox();
        // }
        // 修改checkbox的默认样式end
      }
      .shop-center {
        font-size: 0.6rem;
        font-weight: 600;
        color: #333;
        padding-left: 0.4rem;
      }
      .shop-right {
        color: #ff6600;
        font-size: 0.6rem;
        flex: 1;
        text-align: right;
        padding-right: 0.5rem;
      }
    }
    .goods-item {
      display: flex;
      margin-bottom: 0.2rem;
      .goods-item-left {
        box-sizing: border-box;
        padding-top: 1rem;
      }
      .goods-item-center {
        margin-left: 0.2rem;
        > img {
          width: 3.8rem;
          height: 3.8rem;
        }
      }
      .goods-item-right {
        margin-left: 0.2rem;
        > p {
          &:nth-child(1) {
            font-size: 0.6rem;
            font-weight: 600;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            margin-bottom: 0.25rem;
          }
          &:nth-child(2) {
            > span {
              background-color: @backcolor;
              font-weight: 600;
              font-size: 0.6rem;
              padding: 0 0.05rem;
            }
          }
        }
        > div {
          margin-top: 0.4rem;
          display: flex;
          justify-content: space-between;
          padding-right: 0.5rem;
          > p {
            color: #ff4422;
            font-weight: 600;
          }
          .goods-reduce-add {
            border: 1px solid #ccc;
            width: 3rem;
            height: 0.85rem;
            border-radius: 0.5rem;
            padding: 0.05rem 0.1rem;
            // padding-top: 0;
            overflow: hidden;
            box-sizing: border-box;
            > i {
              width: 0.55rem;
              height: 0.55rem;
              // display: inline-block;
              line-height: 0.55rem;
              text-align: center;
              border: 1px solid #999;
              border-radius: 50%;
              // margin: 0.05rem 0.05rem;
              background-color: #f5f5f5;
              color: #333;
              float: left;
              &:nth-child(3) {
                float: right;
              }
            }
            > span {
              padding-left: 0.4rem;
              float: left;
              // display: inline-block;
              font-size: 0.6rem;
              line-height: 0.7rem;
            }
          }
        }
      }
    }
  }
}
.shoping-cart-calculation {
  height: 1.95rem;
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 50px;
  display: flex;
  border-top: 0.05rem solid #f5f5f5;
  > div {
    &:nth-child(1) {
      width: 3rem;
      box-sizing: border-box;
      padding-top: 0.5rem;
      padding-left: 0.2rem;
    }
    &:nth-child(2) {
      width: 8.4rem;
      box-sizing: border-box;
      padding-top: 0.5rem;
      padding-left: 0.5rem;
      > span {
        color: #ff4422;
        font-weight: 600;
      }
    }
    &:nth-child(3) {
      flex: 1;
      overflow: hidden;
      > a {
        background-color: #ffcc00;
        // padding: 0.2rem 0.4rem;
        border-radius: 0.2rem;
        display: block;
        width: 4.25rem;
        height: 1.4rem;
        line-height: 1.4rem;
        text-align: center;
        font-weight: 600;
        margin-top: 0.3rem;
      }
    }
  }
}
.circular-checkbox {
  .circular-checkbox();
}
</style>
